//地图对象，调整宽高，清空数据，更新数据，遍历数据（渲染）
export default class Map {
     constructor(el, rect = 10) {
          this.el = el;//dom
          this.rect = rect;//小方块边长
          this.data = [];
          this.rows = Math.ceil(Map.getStyle(el, "height") / rect);//行数+列数
          this.cells = Math.ceil(Map.getStyle(el, "width") / rect);
          Map.setStyle(el, "height", this.rows * rect);//重新设置背景宽高
          Map.setStyle(el, "width", this.cells * rect);
     }
     static getStyle(el, attr) {//获取当前宽高
          return parseFloat(getComputedStyle(el)[attr])
     }
     static setStyle(el, attr, val) {//重置宽高
          el.style[attr] = val + "px";
     }
     setData(newData) {//传入蛇的数据（复制整拿数组）
          this.data = this.data.concat(newData);
     }
     clearData() {//清空
          this.data.length = 0;
     }
     include(val) {//兼容性
          return !!this.data.find(item=>(item.x==val.x&&item.y==val.y));
          // return this.data.includes(val)
     }
     render() {//宽高在上面，x，y，color是蛇的数组
          this.el.innerHTML = this.data.map(item => {
               return `<span style="position:absolute;left:${item.x * this.rect}px;top:${item.y * this.rect}px;width:${this.rect}px;height:${this.rect}px;background:${item.color};"></span>`
          }).join("");
     }
}